<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>渠道列表</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">渠道列表信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-row">
                        <div class="layui-form" style="float:right;">
                            <div class="layui-form-item" style="margin:0;">
                                <label class="layui-form-label">支付渠道ID</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="channelId" id="channelId" placeholder="支付渠道ID" autocomplete="off" class="layui-input">
                                </div>
                                <label class="layui-form-label">渠道类型ID</label>
                                <div class="layui-input-inline">
                                    <select name="channelType" id="channelType" lay-search="">
                                        <option value="">渠道类型</option>
                                        <option value="wxpay">微信支付</option>
                                        <option value="alipay">支付宝支付</option>
                                        <option value="kqpay">快钱支付</option>
                                        <option value="swiftpay">威富通支付</option>
                                        <option value="gomepay">银盈通支付</option>
                                    </select>
                                </div>
                                <button id="search" class="layui-btn" data-type="reload">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <style>
                    .center {
                        width: 80%;
                    }
                </style>
                <div class="layui-card-body">
                    <div style="padding-bottom: 10px;">
                        <button class="layui-btn layuiadmin-btn-list" data-type="create">添加</button>
                    </div>
                    <table class="layui-hide center" id="cList" lay-filter="cList"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="payBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>


<script>
    layui.use(['table','util', 'form','admin'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
            ,admin = layui.admin,
            layer =layui.layer,
            view =layui.view
        ,element = layui.element;


        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        // var router = layui.router();
        // var curAppId = location.href.split('?')[1];
        // if(!curAppId) {
        //     curAppId = layui.router().search.appId;
        // }

            //标题内容模板
    //    var tplTitle = function(d){
      //      return '<a class="layui-btn layui-btn-sm layui-btn-normal" lay-href="config/channel/detail/id='+ d.id +'">查看</a>  <a class="layui-btn layui-btn-sm" lay-href="config/channel/update/id='+ d.id + '/channelId=' + d.channelId +'/channelType='+ d.channelType +'">编辑</a>'
     //   };


        var tplStatus = function(d){
            if(d.state == 0) {
            return  "<span class='layui-btn layui-btn-xs layui-btn-disabled'>关闭</span>";
            }else if(d.state == 1) {
                return "<span class='layui-btn layui-btn-xs'>开启</span>";
            }
        };

        var channelTypeStatus = function(d){
            if(d.channelType == "alipay") {
                return "支付宝";
            }else if(d.channelType == "wxpay") {
                return "微信支付"
            }else if(d.channelType == "qpay") {
                return "qq支付"
            }else if(d.channelType == "upacp") {
                return "银联支付";
            }else if(d.channelType == "applepay") {
                return "苹果支付";
            }else if(d.channelType == "bfb") {
                return "百付宝支付"
            }else if(d.channelType == "jdpay") {
                return "京东支付";
            }else if(d.channelType == "kqpay") {
                return "快钱支付";
            }else if(d.channelType == "swiftpay") {
                return "威富通支付";
            }else if(d.channelType == "gomepay") {
                return "银盈通支付";
            }else if(d.channelType == "accountpay") {
                return "账户支付";
            }else {
                return "";
            }
        };

        table.render({
            elem: '#cList'
            ,url: layui.setter.baseUrl + '/config/channel/list'
            // ,where: {appId:curAppId , access_token: layui.data(layui.setter.tableName).access_token}
            ,where: { access_token: layui.data(layui.setter.tableName).access_token}
            ,id: 'tableReload'
            ,cols: [[
                {field:'channelId', title: '支付渠道ID'}
                ,{field:'channelType',  title: '渠道类型', templet: channelTypeStatus}
                ,{field:'scene', title: '应用场景',templet: '<div>{{d.scene == 1?"移动APP":(d.scene == 2)?"移动网页":(d.scene == 3)?"PC网页":(d.scene == 4)?"微信公众平台":(d.scene == 5)?"手机扫码":""}}</div>'  }
                ,{field:'state', title: '状态',templet: tplStatus }
                ,{field:'edit', width: 200, title: '操作', toolbar: '#payBar' }
            ]]
            ,page: true
            ,skin: 'line'
        });


        table.on('tool(cList)', function(obj){
            var data = obj.data;
            if (obj.event === 'edit') {
                location.href = layui.setter.baseLocal + "config/channel/update/id=" + data.id;
            } else if(obj.event === 'detail'){


                var creId =data.id;

                admin.req({
                    type: 'get',
                    url: layui.setter.baseUrl + '/config/channel/get',
                    data: {
                        id : creId
                    },
                    error: function(err){
                        layer.alert(JSON.stringify(err.field), {
                            title: '错误提示'
                        })
                    },
                    success: function(res){
                        if(res.code == 0){

                            // 2 赋值
                            data =res.data;

                            admin.popup({
                                title: '渠道信息'
                                , area: ['390px', '635px']
                                , id: 'LAY-popup-content-detail'
                                , success: function (layero, index) {
                                    view(this.id).render('config/channel/detail').done(function () {
                                        form.render(null, 'layuiadmin-app-form-list');

                                        var body =layer.getChildFrame('body',index);
                                        body.find('#email').val(data.email);

                                        form.val("layuiadmin-app-form-list", {

                                           "id":data.id,
                                            "channelId" :data.channelId,
                                            "type" :data.channelType == "alipay"?"支付宝支付":(data.channelType == "wxpay")?"微信支付":(data.channelType == "qpay")?"qq支付":(data.channelType == "upacp")?"银联支付":(res.data.channelType == "applepay")?"苹果支付":(data.channelType == "bfb")?"百付宝支付":(data.channelType == "jdpay")?"京东支付":(data.channelType == "kqpay")?"快钱支付":(data.channelType == "swiftpay")?"威富通支付":(data.channelType == "gomepay")?"银盈通支付":(data.channelType == "accountpay")?"账户支付":"",
                                            "scene" :data.scene == 1?"移动APP":(data.scene == 2)?"移动网页":(data.scene == 3)?"PC网页":(data.scene == 4)?"微信公众平台":(data.scene == 5)?"手机扫码":"",
                                            "status" :data.state == 1? "开启":"关闭",
                                            "remark" :data.remark,
                                            "param" : data.param,
                                            "createTime" : layui.util.toDateString(res.data.createTime),
                                            "updateTime" : layui.util.toDateString(res.data.updateTime)

                                        })
                                    });
                                }
                            });


                        }
                    }
                })


            }

        });


        // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var channelType = $('#channelType').val();
                var channelId = $("#channelId").val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        channelType: channelType,
                        channelId : channelId
                    }
                });
            }

            ,create: function (othis) {
                admin.popup({
                    title: '新增支付渠道'
                    , area: ['780px', '570px']
                    , id: 'LAY-popup-content-create'
                    , success: function (layero, index) {
                        view(this.id).render('config/channel/create').done(function () {
                            form.render(null, 'layuiadmin-app-form-list');

                            //监听提交
                            form.on('submit(channelAdd)', function(data){
                                admin.req({
                                    type: 'post',
                                    url: layui.setter.baseUrl + '/config/channel/add', //模拟接口
                                    data: data.field,
                                    error: function(err){
                                        layer.alert(err.msg,{title:"请求失败"})
                                    },
                                    success: function(res){
                                        if(res.code == 0){
                                            /*layer.alert(res.msg,{title: "保存成功"},function(index){
                                                table.reload('tableReload');
                                                layer.closeAll();
                                            })*/
                                            layer.msg('保存成功', {
                                                offset: '15px'
                                                ,icon: 1
                                                ,time: 1000
                                            }, function(){
                                                table.reload('tableReload');
                                                layer.closeAll();
                                            });
                                        }else {
                                            /*layer.alert(res.msg,{title: '保存失败'})*/
                                            layer.msg('保存失败', {
                                                offset: '15px'
                                                ,icon: 1
                                                ,time: 1000
                                            });
                                        }
                                    }
                                })
                            })
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                    }
                });
            }


        };
        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        // 渲染表单
        form.render();


    });
    
</script>
